<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/test.css" type="text/css" media="all" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	     var html = ""; 
	     html = html + "<h3 class='table-title'>글로서리 상세</h3>";
	     html = html + "<table>";
	     html = html +     "<col style='width:20%;'>"; 
	     html = html +     "<col style='width:80%;'>";  
	     html = html +     "<tr>"; 
	     html = html +         "<th>글로서리ID</th>";
	     html = html +         "<td><span=''></span></td>";
	     html = html +     "</tr>"; 
	     html = html +     "<tr>"; 
	     html = html +         "<th>글로서리값</th>"; 
	     html = html +         "<td><span=''></span></td>";	     
	     html = html +     "</tr>";
	     html = html + "<table>";  
	     $("#detail").append(html);
	     		
		$.ajax({
			   type: "GET",
			   url:  "/rest/glossary/types",
			   success: function(data){ 
			     var html = "";	
			     html = html + "<h3 class='table-title'>글로서리 리스트</h3>";
			     html = html + "<table>";
			     html = html +     "<col style='width:10%;'>";
			     html = html +     "<col style='width:30%;'>";
			     html = html +     "<col style='width:60%;'>"; 
			     html = html +     "<thead>";
			     html = html +         "<th>No.</th>";
			     html = html +         "<th>글로서리ID</th>";
			     html = html +         "<th>글로서리값</th>"; 
			     html = html +     "</thead>"; 
			     html = html +     "<tbody>"; 
			     
			   	 $.each(data, function(index, value) {
				   	 html = html + "<tr>";
				   	 html = html +     "<td>" + (index + 1) + "</td>";
				   	 html = html +     "<td>" + value.glossaryType.id + "</td>";
				   	 html = html +     "<td>" + value.glossaryType.name + "</td>";  
				   	 html = html + "</tr>";
			   	 });
			   	 html = html +     "</tbody>";
			     html = html + "</table>";
			     
			   	 $("#list").append(html);
			   } 

		 }); 
		 		
	});  
</script>
</head>
<body>  
<div id="content">
<div id="list"></div>
<div id="detail"></div> 
</div> 
</body>
</html>